<template>
  <div>
    <tableHeader />
    <!-- 工序拉动看板料号详情 -->
    <el-card class="business_info-card lg-mb-20">
      <el-tabs
        type="border-card"
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="销售出货计划" name="salse">
          <SalseOutPlanContainer ref="TablesRef" />
        </el-tab-pane>
        <el-tab-pane label="库存数量/实际可用库存/安全库存需求量" name="stoke">
          <StockTwoContainer
            ref="StockTwoTablesRef"
            v-if="state.tabPane.stokeShow"
          />
        </el-tab-pane>
        <el-tab-pane label="料品工序库存/采购入库情况" name="ProAndPur">
          <ProAndPurContainer
            ref="ProAndPurContainerTablesRef"
            v-if="state.tabPane.ProAndPurShow"
          />
        </el-tab-pane>
        <el-tab-pane label="料品未结工单" name="GoodsInprocess">
          <GoodsInprocessContainer
            ref="GoodsInprocessTablesRef"
            v-if="state.tabPane.GoodsInprocessShow"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { provide, reactive, onMounted, ref } from "vue";
import { DictOperation } from "@/utils/common"; // 导入表格api方法生成器
import { useRouter } from "vue-router";
import tableHeader from "./tableHeader.vue";
import SalseOutPlanContainer from "./SalseOutPlanContainer.vue";
import StockTwoContainer from "./StockTwoContainer.vue";
import ProAndPurContainer from "./ProAndPurContainer.vue";
import GoodsInprocessContainer from "./GoodsInprocessContainer.vue";
import type { TabsPaneContext } from "element-plus";
import { useFollowProlem } from "@/store/backend/Board/followProlem";
import { useBoardMasterPlan } from "@/store/backend/Board/MasterPlan";

const followProlem = useFollowProlem();
const MasterPlan = useBoardMasterPlan();

//初始化字典处理类
const dictOperation = new DictOperation();

const TablesRef = ref(); //料号详情tables页面
const StockTwoTablesRef = ref(); //料号详情tables页面
const ProAndPurContainerTablesRef = ref(); //料号详情tables页面
const GoodsInprocessTablesRef = ref(); //料号详情tables页面

const state: {
  objectOptions: anyObj[];
  currentTabName: string;
  tabPane: anyObj;
} = reactive({
  objectOptions: [], //告警对象列表
  currentTabName: "",
  tabPane: {
    stokeShow: false,
    ProAndPurShow: false,
    GoodsInprocessShow: false,
  },
});

//当前标签页
const activeName = ref("salse");
//标签页点击切换
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log("tab 被选中时触发", tab.paneName, event);
  //保存当前标签页名称
  state.currentTabName = tab.paneName as string;
  switch (tab.paneName) {
    case "stoke":
      state.tabPane.stokeShow = true;
      break;
    case "ProAndPur":
      state.tabPane.ProAndPurShow = true;
      break;
    case "GoodsInprocess":
      state.tabPane.GoodsInprocessShow = true;
      break;
    default:
      state.tabPane.stokeShow = false;
      state.tabPane.ProAndPurShow = false;
      state.tabPane.GoodsInprocessShow = false;
      break;
  }
};

interface anyObj {
  [key: string]: any;
}

onMounted(() => {});

provide("dictOperation", dictOperation);
provide("followProlem", followProlem);
provide("MasterPlan", MasterPlan);
</script>
<style lang="scss" scoped>
.business_info {
  &-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .business_devices-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.lg-mb-20 {
  margin-bottom: 20px;
}
</style>
